<template>
  <ElSplitter v-if="active === 'property'">
    <ElSplitterPanel collapsible class="p5px">
      <HomePropsEditor :name="name" v-model="data" />
      <PopupPropsEditor v-if="data.mode === 'popup'" v-model="popupProps" />
      <ElDescriptions :column="column" border class="mt5px">
        <ElDescriptionsItem  label="类型">
          <ElSelect v-model="data.type">
            <ElOption label="模块" value="module" />
            <ElOption label="关系" value="through" />
          </ElSelect>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="表模式">
          <el-input v-model="data.tableSchema" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="表名">
          <el-input v-model="data.tableName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="名称列">
          <ColumnSelect :seed-name="seedName" v-model="data.nameColumn" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions :column="column" border class="mt5px">
        <ElDescriptionsItem label="申明" :span="column">
          <DeclaresEditor v-model="data.declares" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="条件" :span="column">
          <SearchesEditor v-model="data.searches" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="排序" :span="column">
          <OrdersEditor v-model="data.orders" :seed-name="seedName" :key="seedName" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions :column="column" border class="mt5px">
        <ElDescriptionsItem label="是否检查登录">
          <ElSwitch v-model="data.checkLogin" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否功能权限">
          <ElSwitch v-model="data.checkAction" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否数据权限">
          <ElSwitch v-model="data.checkData" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否字段权限">
          <ElSwitch v-model="data.checkField" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="是否关键字">
          <ElSwitch v-model="data.useKeyword" />
        </ElDescriptionsItem>
      </ElDescriptions>
      <ElDescriptions :column="column" border class="mt5px">
        <ElDescriptionsItem label="保存监听" :span="column">
          <ElInput v-model="data.onSave" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="更新监听" :span="column">
          <ElInput v-model="data.onUpdate" />
        </ElDescriptionsItem>
        <ElDescriptionsItem label="查询监听" :span="column">
          <ElInput v-model="data.onSet" />
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElSplitterPanel>
    <ElSplitterPanel collapsible class="p5px">
      <div class="bg-green flex items-center h30px pl5px color-#FFF">列</div>
      <ColumnList :seed-name="props.seedName" />
      <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">关系</div>
      <RelactionList :seed-name="props.seedName" />
      <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">统计</div>
      <StatList :seed-name="props.seedName" />
      <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">分组</div>
      <GroupList type="seed" :seed-name="props.seedName" />
    </ElSplitterPanel>
  </ElSplitter>
  <ComponentEditor v-if="active === 'component'" type="seed" v-model:component="data.component" v-model:component-props="data.componentProps" />
  <LayoutEditor v-if="active === 'layout'" v-model="data.layout" />
</template>
<script lang="ts" setup>
  import { active, currentApp, currentMicro } from '@/views/seed-dev'
  import { ElInput, ElSelect, ElOption, ElSwitch, ElDescriptions, ElDescriptionsItem, ElSplitter, ElSplitterPanel } from 'element-plus'
  import { ComponentEditor } from '../../ComponentEditor';
  import { LayoutEditor } from '../../LayoutEditor';
  import { ref, watch } from 'vue';
  import { save } from '..';
  import { PrimaryKeyEditor } from '../../PrimaryKeyEditor';
  import { SeedConfiguration } from '@/views/dev-types';
  import { ColumnSelect } from '../../ColumnSelect';
  import { SearchesEditor } from '../../SearchesEditor';
  import { OrdersEditor } from '../../OrdersEditor';
  import { DeclaresEditor } from '../../DeclarsEditor';  
  import { PopupPropsEditor } from '../../PopupPropsEditor';
  import { HomePropsEditor } from '../../HomeEditor';
  import { ColumnList } from '../../ColumnEditor';
  import { RelactionList } from '../../RelationEditor';
  import { StatList } from '../../StatEditor';
  import { GroupList } from '../../GroupEditor';

  const props = defineProps<{seedName: string}>()
  const column = 2
  // const columns = computed((): ColumnConfiguration[] => {
  //   const ret = []
  //   for(const columnName in data.value.columns) {
  //     const col = data.value.columns[columnName]
  //     ret.push({...col, name: columnName})
  //   }

  //   return ret
  // })
  
  // const relations = computed((): any[] => {
  //   const ret = []
  //   for(const cross in data.value.hasOne) {
  //     const r = data.value.hasOne[cross]
  //     ret.push({...r, type: 'hasOne', name: cross})
  //   }

  //   for(const cross in data.value.belongsTo) {
  //     const r = data.value.belongsTo[cross]
  //     ret.push({...r, type: 'belongsTo', name: cross})
  //   }

  //   for(const cross in data.value.hasMany) {
  //     const r = data.value.hasMany[cross]
  //     ret.push({...r, type: 'hasMany', name: cross})
  //   }

  //   for(const cross in data.value.habtm) {
  //     const r = data.value.habtm[cross]
  //     ret.push({...r, type: 'habtm', name: cross})
  //   }

  //   return ret
  // })

  // const stats = computed((): StatConfiguration[] => {
  //   const ret = []
  //   for(const statName in data.value.stats) {
  //     const item = data.value.stats[statName]
  //     ret.push({...item, name: statName})
  //   }

  //   return ret
  // })

  // function addColumn() {
  //   open({title: '创建列'}, ColumnCreator, { seedName: props.seedName })
  // }

  // function batchAddColumn() {
  //   open({title: '批量创建列'}, ColumnBatchCreator, { seedName: props.seedName })
  // }

  // function editColumn(columnName: string) {
  //   open({title: '编辑列'}, ColumnEditor, { seedName: props.seedName, columnName })
  // }

  // function editColumnElement(columnName: string) {
  //   open({title: '编辑列元素', fullscreen: true}, ColumnElementEditor, { seedName: props.seedName, columnName })
  // }

  // function removeColumn(columnName: string) {
  //   const seed = getSeed(props.seedName)
  //   delete seed.columns[columnName]
  // }

  // function addRelation(type: RelationType) {
  //   open({title: '创建关系'}, RelationCreator, { seedName: props.seedName, type })
  // }

  // function editRelation(type: RelationType, cross: string) {
  //   open({title: '编辑关系'}, RelationEditor, { seedName: props.seedName, type, cross })
  // }

  // function removeRelation(type: RelationType, cross: string) {
  //   const seed = getSeed(props.seedName)
  //   switch(type) {
  //     case 'hasOne':
  //       delete seed.hasOne[cross]
  //       break
  //     case 'belongsTo':
  //       delete seed.belongsTo[cross]
  //       break
  //     case 'hasMany':
  //       delete seed.hasMany[cross]
  //       break
  //     case 'habtm':
  //       delete seed.habtm[cross]
  //       break
  //   }
  // }

  function getInitData() {
    if(!props.seedName) return {}

    const microName = currentMicro.value
    if(microName) {
      const micro = currentApp.value.micros[microName]
      return micro.seeds[props.seedName]
    }

    return currentApp.value.seeds[props.seedName]
  }

  const name = ref<string>(props.seedName)
  const data = ref<SeedConfiguration>(getInitData())
  const popupProps = ref(data.value.popupProps || {})

  watch(() => data.value, () => save(name.value, data.value), { deep: true })
  watch(() => popupProps.value, (val) => data.value.popupProps = val, { deep: true })
</script>
<style lang="less" scoped>
  :deep(.is-bordered-label) {
    width: 120px;
  }
</style>